<template>
  <n-row>
    <n-col :span="24">
      <n-button text @click="addColumn">
        <n-icon>
          <add-icon />
        </n-icon>
      </n-button>
    </n-col>
    <n-col v-for="(v, k) in columns" :key="k" :span="24">
      <n-grid>
        <n-form-item-gi :span="11">
          <n-input :readonly="!keyEditable" v-model:value="v.key" placeholder="名称" maxlength="32">
            <template #prefix>名称</template>
          </n-input>
        </n-form-item-gi>
<!--        <n-form-item-gi :span="7">-->
<!--          <n-select v-model:value="v.dataType" :options="['BOOL','DOUBLE','FLOAT','INT','STRING'].map(v => { return {label: v, value: v} })" placeholder="请选择字段类型" />-->
<!--        </n-form-item-gi>-->
        <n-form-item-gi :span="11">
          <n-input v-model:value="v.value" placeholder="值" maxlength="512">
            <template #prefix>值</template>
          </n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="2">
          <n-button text @click="removeColumn(k)">
            <n-icon>
              <close-icon />
            </n-icon>
          </n-button>
        </n-form-item-gi>
      </n-grid>
    </n-col>
  </n-row>
</template>

<script>
import { Add as AddIcon, Close as CloseIcon } from '@vicons/ionicons5'

export default {
  name: "KeyValue",
  components: { AddIcon, CloseIcon },
  emits: ["update:value"],
  props: {
    value: {
      type: Array,
      default: () => []
    },
    keyEditable: {
      type: Boolean,
      default: () => false,
    }
  },
  data () {
    return {
      columns: ref(this.value),
    }
  },
  methods: {
    removeColumn (idx) {
      this.columns.splice(idx, 1);
    },
    addColumn () {
      this.columns.push({});
    }
  }
}
</script>

<style scoped>

</style>
